<template>
  <div class="answer-result">
      <div class="tag">
        <div class="iconfont icon-chenggong"></div>
        <div class="text-wrap text-success">
          <div class="title">恭喜你，回答正确</div>
          <div class="source">获得 {{ score }} 分</div>
        </div>
      </div>
      <div class="button-group">
        <div class="btn review-btn" @click="handleReview">重 播</div>
        <div class="btn to-home" @click="handleToHome">返回首页</div>
      </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from "vue-router";
import { useCurrentVideo, useAnswerList } from '@/store/answer.js';

//  记录视频播放地址，便于回到原来的位置
const { currentVideo } = useCurrentVideo();
//  返回首页或者重播 需要清空之前的数据
const { clearAnswerList } = useAnswerList();
const route = useRoute();
const router = useRouter();

//  当前获取的分数
const score = ref(route.query.score || 0);

//  重新播放
const handleReview = () => {
  clearAnswerList();
  router.replace(currentVideo);
}

//  返回首页
const handleToHome = () => {
  clearAnswerList();
  router.push({ path: '/Home'});
}
</script>

<style lang="scss" scoped>
.answer-result {
  .tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 36vh;
    background: #fff;

    .iconfont {
      font-size: 5rem;
      &.icon-chenggong {
        color: rgb(2, 155, 0);
      }

      &.icon-71shibai {
        color: rgb(255, 105, 106);
      }
    }

    .text-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 1.6rem;

      .title {
        margin-top: 1rem;
      }

      .source {
        margin-top: 1rem;
      }
    }
  }

  .button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;

    .btn {
      margin-bottom: 2rem;
      width: 90vw;
      height: 4rem;
      text-align: center;
      line-height: 4rem;
      font-size: 1.6rem;
      border-radius: 2rem;
      box-sizing: border-box;

      &.review-btn {
       background: rgb(3, 104, 205);
        color: #fff;
      }

      &.to-home {
        border: .1rem solid rgb(3, 104, 205);
        color: rgb(3, 104, 205);
      }
    }
  }
}
</style>